<script setup>
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import api from '@/api'

const $route = useRoute()
const $router = useRouter()

const keyword = ref('')
const listData = ref([])
const listTotal = ref(0)
const TypeList = reactive([
  {
    label: '系统模版',
    value: 1,
  },
  {
    label: '自建',
    value: 2,
  },
])
const filter = reactive({
  keyword: '',
  type: '',
  page: 1,
  pageSize: 10,
})
const getListData = async (page) => {
  try {
    const res = await api.get('/recruit/templateList', {
      params: {
        keyword: filter.keyword,
        type: filter.type,
        page,
        pageSize: filter.pageSize,
      },
    })
    console.log('res', res)
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    filter.page = page
  } catch (error) {
    console.error(error)
  }
}
getListData(1)

const deleteData = (record) => {
  // Message.error({
  //   content: record.id,
  // })
  api.get(`/recruit/deleteTemplate?template_id=${record.id}`).then((res) => {
    if (res.code == 200) {
      Message.success({
        content: '删除成功',
      })
      getListData(1)
    } else {
      Message.error({
        content: res.message,
      })
    }
  })
}

const toJump = (url) => {
  console.log('router', $router.push(url))
  $router.push(url)
}
</script>

<template>
  <div class="page">
    <div class="header">
      <div>
        <a-space>
          <a-select v-model="filter.type"
                    placeholder="类型筛选">
            <a-option value="">选择类型</a-option>
            <a-option v-for="item in TypeList"
                      :value="item.value"
                      :key="item.value">{{ item.label }}</a-option>
          </a-select>
          <a-input-search :style="{ width: '320px' }"
                          v-model="filter.keyword"
                          placeholder="模版名称模糊查询"
                          button-text="查询"
                          @search="getListData"
                          search-button />
        </a-space>
      </div>

      <a-button @click="toJump('/recruit/formwork/form?type=1')"
                type="primary">新建招聘模板</a-button>
    </div>

    <a-table :data="listData"
             @page-change="getListData"
             :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: filter.pageSize,
              current: filter.page,
            }">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="招聘模版名称"
                        data-index="template_name"></a-table-column>
        <a-table-column title="类型">
          <template #cell="{ record }">
            <template v-if="record.type == 1">系统模版</template>
            <template v-if="record.type == 2">自建</template>
          </template>
        </a-table-column>
        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary"
                        size="mini"
                        @click="toJump('/recruit/formwork/form?type=2&id=' + record.id)">查看</a-button>
              <a-button type="primary"
                        size="mini"
                        @click="toJump('/recruit/formwork/form?type=3&id=' + record.id)">编辑</a-button>

              <a-popconfirm @ok="deleteData(record)"
                            content="确认删除该数据吗?"
                            type="warning">
                <a-button v-if="record.type == 2"
                          type="primary"
                          status="danger"
                          size="mini">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  justify-content: space-between;
}
</style>
